<template>
	<div class="bj">
		<div class="e" @tap="goToxq">
			<div class="w3">
				创建于2025.9.14
			</div>
			<div class="xian"></div>
			<div class="r2">
				<div class="lx">
					<div class="bw">
						打架斗殴
					</div>
					<div class="gw">
						突发事件类型
					</div>
				</div>
				<div class="sf">
					<div class="bw">
						是
					</div>
					<div class="gw">
						是否报送心理健康中心
					</div>
				</div>
				<div class="sum2">
					<div class="bw">
						9
					</div>
					<div class="gw">
						涉及学生人数
					</div>
				</div>
			</div>
			<div class="c2">
				<div class="hui">
					突发事件概述
				</div>
				<div class="he">
					打架斗殴
				</div>
			</div>
			<div class="id">
				事件ID:072107210721
			</div>
		</div>
		
		
	</div>

</template>

<script>
export default 
{
	methods: 
	{
		goToxq()
		{
			console.log('事件被点击了！！！');
			uni.navigateTo({url: '/pages/traft/sub'});
		}
	}
}
</script>

<style>
	.id
	{
		margin-left: 22rpx;
		margin-top: 14rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 24rpx;
		text-align: left;
		color: #808080;
	}
	.he
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 24rpx;
		margin-top: 10rpx	;
		margin-left: 20rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.hui
	{
		margin-top: 12rpx;
		margin-left: 20rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 24rpx;
		text-align: left;
		color: #808080;
	}
	.c2
	{
		padding-top: 1rpx; /* 极小的内边距即可避免折叠 */
		margin-left: 22rpx;
		width: 648rpx;
		height: 102rpx;
		border-radius: 12rpx;
		background: #f5f5f5;
	}
	.gw
	{
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 24rpx;
		text-align: center;
		color: #808080;
	}
	.bw
	{
		margin-top: 5rpx;
		color: #1a1a1a;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 700;
		letter-spacing: 0;
	}
	.sum2
	{
		margin-left: 50rpx;
		width: 144rpx;
		height: 76rpx;
		background: transparent;
		/* background-color: #5BCEFA; */
		  
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.sf
	{
		margin-left: 52rpx;
		width: 240rpx;
		height: 76rpx;
		background: transparent;
		/* background-color:white; */
		
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lx
	{
		width: 144rpx;
		height: 76rpx;
		background: transparent;
		/* background-color: #F7A8B8; */
		
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.r2
	{
		display: flex;
		margin-left: 28rpx;
		margin-top: 25rpx;
		width: 630rpx;
		height: 76rpx;
		background: transparent;
	}
	.xian
	{
		margin-left: 13rpx;
		width: 654rpx;
		background: transparent;
		border: 1rpx solid #dbdbdb;
	}
	.w3
	{
		margin-left: 40rpx;
		margin-top: 20rpx ;
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 28rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.e
	{
		margin-top: 16rpx;
		width: 688rpx;
		height: 310rpx;
		border-radius: 12rpx;
		background: white;
		box-shadow: 0 4rpx 8rpx #e6e6e64d;
	}
	.bj
	{
		width: 100%;
		background: #f2f4f7;
		display: flex;
		flex-direction: column;
		/* 		justify-content: center; */
		align-items: center;
	}
</style>